<div class="md-wrap">
    <div class="md-doc">
        <iframe frameborder="0" width="450" height="200" src="/exam/1.html" ></iframe>
        <h1> d3的性质 </h1>
        <div>
            <p>1、数据驱动</p>
            <p>2、基于链式的选择器、操作</p>
            <p>3、类似于jQuery，所以需要先学习svg，就好像学jQuery,要先学DOM</p>
            <p>4、同时集成<a target="_blank" href="/exam/2.html">现成的图</a>，但适用于特定的场景。类似于jQuery插件，</p>
        </div>
        <h1> d3的动画 </h1>
        <div>
            <p>1、基于css3的动画</p>
            <p>2、transition 基于控制点，看一下<a target="_blank" href="/exam/3.html">这个</a> </p>
        </div>
    </div>

    <div class="md-code">
        <h2> 相应html </h2>
        <pre>
            &lt;svg class='chart'&gt;

            &lt;/svg&gt;
        </pre>
        <h1>相应css</h1>
        <pre>
    .chart rect{
        fill:rgb(0,0,255);
    }
    .chart text{
        fill:rgb(255,255,255);
        font:10px sans-serif;
        text-anchor:end;
    }
        </pre>
        <h2> 相应js </h2>
        <pre>
    var data = [ 4,8,15,16,23,42 ] ;

    var width = 420 ;
    var barHeight = 20 ;

    var x = d3.scale.linear()
            .domain([0,d3.max(data)])
            .range([0,width]) ;

    var chart = d3.select('.chart')
                .attr('width',width)
                .attr('height',barHeight*data.length) ;

    var bar = chart.selectAll('g')
                .data(data).enter().append('g')
                    .attr('transform',function(d,i){
                        return "translate(0," + (i*(barHeight+1)) + ")";
                    }) ;

    bar.append('rect')
        .attr('width',0)
        .transition()
        .duration(2000)
        .attr('width',function(d){return x(d);})
        .attr('height',barHeight) ;

    bar.append('text')
        .attr('x',0)
        .transition()
        .duration(2000)
        .attr('x',function(d){return x(d)-2;})
        .attr('y',barHeight/2)
        .attr('dy','.35em')
        .text(function(d){
            return d ;
        }) ;
        </pre>
    </div>
</div>